<template>
  <div class="edit">
    <el-row>
      <el-col :span="4.5">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <el-select v-model="item.selectValue" clearable placeholder="Select" @change="selectChanged(item)">
                <el-option-group v-for="group in list" :key="group.groupValue" :label="group.groupName">
                  <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"/>
                </el-option-group>
              </el-select>
            </div>
          </template>
          <!--***********************渲染*******************************-->
          <viewer_edit :item="item.data" @selectDetail="selectDetail"/>
        </el-card>
        <el-row>
          <el-col :span="10">
            <el-button @click="delDes">删除</el-button>
          </el-col>
          <el-col :span="10">
            <!--          *****************  新增*******************************-->
            <el-popover :width="600" trigger="click">
              <template #reference>
                <el-button>新增</el-button>
              </template>
              <el-row>
                <el-col :span="10">
                  <el-input v-model="txtId">
                    <template #prepend>ID:</template>
                  </el-input>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="txtTier">
                    <template #prepend>层级:</template>
                  </el-input>
                </el-col>
                <el-col :span="4">
                  <el-button @click="addItem">确定</el-button>
                </el-col>
              </el-row>
            </el-popover>
            <!--          *****************  新增*******************************-->
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10" class="edit_value">
        <el-row>
          <el-col :span="16">
            <el-input v-model="edit.title">
              <template #prepend>ID:{{ edit.id }} 名称:</template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-input v-model="edit.need">
              <template #prepend>前置:</template>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-input v-model="edit.parent">
              <template #prepend>父级:</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="3">
            <el-select v-model="edit.type" clearable placeholder="Select" @change="isShowCD= (this.edit.type !== '被动' && this.edit.type !== '')">
              <el-option v-for="item in listType" :key="item.value" :label="item.value" :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-input v-model="edit.cost">
              <template #prepend>AP:</template>
            </el-input>
          </el-col>
          <el-col :span="17">
            <el-input v-model="edit.tips" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea">
            </el-input>
          </el-col>
        </el-row>
        <el-row v-for="(des,index)  in edit.descriptions">
          <el-col :span="4">
            <el-row>
              <el-input v-model="des.cost_sp" v-if="isShowCD">
                <template #prepend>消耗:</template>
              </el-input>
            </el-row>
            <el-row>
              <el-input v-model="des.cd" v-if="isShowCD">
                <template #prepend>冷却:</template>
              </el-input>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-button @click="addDescriptions" v-if="index===edit.descriptions.length-1" type="primary">+</el-button>
              <el-button @click="delDescriptions" v-if="index===edit.descriptions.length-1" type="danger">-</el-button>
            </el-row>
          </el-col>
          <el-col :span="20">
            <el-input v-model="des.txt" :autosize="{ minRows: 3, maxRows: 12 }" type="textarea"/>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="4">
            <el-button @click="saveEdit">保存</el-button>
          </el-col>
          <el-col :span="4">
            <el-button @click="downloadJson()">下载</el-button>
          </el-col>
        </el-row>
        <div class="tips">
          <div>
            <el-tag type="warning" effect="dark">
              Tips:
            </el-tag>
          </div>
          <div>
            <span class="green" @click="copy($event,0)">Green</span> &nbsp;&nbsp;<span class="purple" @click="copy($event,0)">Purple</span>
            <br/><br/>
            <span class="destiny_title" @click="copy($event,1)">天命披风 DestinyMantle</span>&nbsp;&nbsp;<span class="destiny_title" @click="copy($event,1)">天命披风增强 DestinyMantleUpgrade</span>
            <br/><br/>
            <span class="strike_title" @click="copy($event,1)">传奇打击 Epic Strike</span>&nbsp; &nbsp;<span class="strike_title" @click="copy($event,1)">传奇打击增强 Epic Strike Upgrade</span>
            <br/><br/>
            <span class="moment_title" @click="copy($event,1)">传奇时刻 Epic Moment</span>
            <br/><br/>
            <span @click="copy($event,1)">&lt;br/&gt;</span>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import viewer_edit from './viewer_edit.vue'
import {ElButton, ElInput, ElSelect, ElOption, ElOptionGroup, ElBadge, ElRow, ElCol, ElRadioGroup, ElRadioButton, ElCard, ElPopover, ElMessageBox, ElMessage, ElTag} from "element-plus";
import data from "../data";
import linq from 'linq'

export default {
  name: "editor",
  components: {ElButton, ElInput, ElSelect, ElOption, ElOptionGroup, ElBadge, ElRow, ElCol, ElRadioGroup, ElRadioButton, ElCard, ElPopover, ElMessageBox, ElMessage, ElTag, viewer_edit},
  props: {
    list: Array
  },
  data() {
    return {
      txtId: '',
      txtTier: 1,
      txtParent: '',
      isShowCD: false,
      listType: [{value: "被动"}, {value: "主动"}, {value: "光环"}],
      item: {selectValue: '', data: {}},
      options: [{groupName: '', groupValue: '', options: [{value: '', label: ''}]}],
      edit: {id: "", title: "", tier: 0, type: "被动", cost: 1, need: 0, now: 0, ranks: 1, tips: "", descriptions: [{txt: ""}]}
    }
  },
  methods: {
    selectChanged(item) {
      let tag = 0;
      let tmp = data.utilities.getLocal(this.item.selectValue)
      if (tmp) {
        ElMessageBox.confirm('发现修改缓存,是否载入?', 'Warning', {confirmButtonText: '载入', cancelButtonText: '删除', type: 'warning',})
            .then(() => {
              item.data = tmp;
              tag = 1;
              ElMessage.success('载入成功!')
            })
            .catch(() => {
              data.utilities.delLocal(this.item.selectValue)
              ElMessage.info('缓存删除')
            })
      }
      if (tag === 0) {
        data.getDes(item.selectValue).then(data => item.data = data).catch(e => {
          data.getDes('null').then(data => {
            item.data = data
            item.data.bg = `url( 'data/img/${item.selectValue}.png' )`;
          });
        });
      }

    },
    selectDetail(detail) {
      console.log('----------------->', detail)
      this.edit = detail;
      this.isShowCD = (this.edit.type !== '被动' && this.edit.type !== null);
    },
    addDescriptions() {
      this.edit.descriptions.push({cost_sp: 5, cd: 5, txt: ""})
    },
    delDescriptions() {
      if (this.edit.descriptions.length !== 1) data.utilities.remove(this.edit.descriptions, this.edit.descriptions[this.edit.descriptions.length - 1]);
    },
    delDes() {
      let ary = linq.from(this.item.data.details).where(x => x.id === this.edit.id)
      if (ary.count() > 0) {
        data.utilities.remove(this.item.data.details, ary.first());
      }
    },
    addItem() {
      let newItem = data.utilities.deepCopy(this.edit);
      console.log(newItem)
      newItem.id = this.txtId;
      newItem.tier = Number(this.txtTier);
      this.item.data.details.push(newItem);
    },
    saveEdit() {
      let ary = linq.from(this.item.data.details).where(x => x.id === this.edit.id);
      if (ary.count() > 0) {
        let select = ary.first();
        this.edit.ranks = this.edit.descriptions.length;
        this.edit.cost = Number(this.edit.cost);
        this.edit.need = Number(this.edit.need);
        linq.from(this.edit.descriptions).forEach(x => {
          if (x.cost_sp) {
            if (x.cost_sp === 0 || this.edit.type === '被动') delete x.cost_sp;
            else x.cost_sp = Number(x.cost_sp);
          }
          if (x.cd) {
            if (x.cd === 0 || this.edit.type === '被动') delete x.cd;
            else x.cd = Number(x.cd);
          }
        })
        select = data.utilities.deepCopy(this.edit);
        data.utilities.setLocal(this.item.selectValue, this.item.data)
        ElMessage.success('保存成功!')
      }
    },
    downloadJson() {
      data.utilities.saveJson(this.item.selectValue, this.item.data);
    },
    saveContent(e) {
      let key = window.event.keyCode ? window.event.keyCode : window.event.which
      if (key === 83 && e.ctrlKey) {
        this.saveEdit()
        e.preventDefault()
      }
    },
    copy(e, tag) {
      //console.log('copy', e.target.outerHTML);
      if (tag === 1) {
        data.utilities.copyToClipboard(e.target.outerText).then(() => ElMessage.success('复制成功!'));
      } else {
        data.utilities.copyToClipboard(e.target.outerHTML).then(() => ElMessage.success('复制成功!'));
      }
    }

  },
  mounted() {
    document.addEventListener('keydown', this.saveContent)
  }
}
</script>

<style lang="scss">
.edit {
  width: 95%;

  .box-card {
    width: 100%;
    height: 510px;

    .card-header {
      text-align: left;
      height: 30px;

      .el-select {
        width: 100%;
      }
    }
  }

  .edit_value {
    margin-left: 10px;
  }
}

.tips {
  margin-top: 10px;
  padding-left: 10px;
  text-align: left;

  div {
    margin: 10px;
  }
}

.green {
  background-color: darkgreen;
  color: #fcdb59;
  padding: 3px;
  margin: 3px;
  font-weight: bold;
}

.purple {
  background-color: purple;
  color: #fcdb59;
  padding: 3px;
  margin: 3px;
  font-weight: bold;
}
</style>